<template>
  <div>
    <div id="Bottom3"></div>
  </div>
</template>
<script>
import { Scatter } from '@antv/g2plot';
export default {
  methods:{
    myAntv(){
      fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f42764a8.json')
        .then((res) => res.json())
        .then((data) => {
          const scatterPlot = new Scatter('Bottom3', {
            appendPadding: 30,
            data,
            xField: 'xG conceded',
            yField: 'Shot conceded',
            colorField: 'Result',
            size: 5,
            shape: 'circle',
            pointStyle: {
              fillOpacity: 1,
            },
            yAxis: {
              nice: true,
              line: {
                style: {
                  stroke: '#aaa',
                },
              },
            },
            xAxis: {
              grid: {
                line: {
                  style: {
                    stroke: '#eee',
                  },
                },
              },
              line: {
                style: {
                  stroke: '#aaa',
                },
              },
            },
            label: {},
          });
          scatterPlot.update({ "theme": { "styleSheet": { "brandColor": "#FF6B3B", "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"], "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"] } } });
          scatterPlot.changeSize(350,165);
          scatterPlot.render();
        });
    }
  },
  mounted(){
    this.myAntv();
  }
}
</script>